<template>
  <div class="app-container" alient:center>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in tableData"
        :key="item.path"
        :icon="item.meta.icon"
        :text="item.meta.title"
        @click="handleSelectionChange(item)"
      />
    </van-grid>

    <van-grid :column-num="1">
      <van-grid-item icon="home-o" text="注销" @click="handlelogout()" />
    </van-grid>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [
        {
          path: "/seller",
          component: () => import("@/views/home/seller"),
          hidden: true,
          meta: { title: "卖家中心", icon: "fire-o" }
        },
        {
          path: "/station",
          component: () => import("@/views/home/station"),
          hidden: true,
          meta: { title: "自提点中心", icon: "shop-o" }
        },
         {
          path: "/test",
          component: () => import("@/views/test/index"),
          hidden: true,
          meta: { title: "测试", icon: "ellipsis" }
        }
      ]
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.$router.push({ path: val.path });
    },
    handlelogout() {
      this.$store
        .dispatch("LogOut")
        .then(() => {
          this.$router.push({ path: "/" });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.item {
  padding: 10px, 10px, 10px, 10px;
  background-color: beige;
  width: 30%;
  height: 60px;
}
</style>
